<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar title="新增施工日志" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="formData" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="项目名称" borderBottom @click="showSelect('projectListShow')">
								<u-input
									:value="formData.project_item.project_name"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择项目名称"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="施工阶段" borderBottom @click="$refs.userSelect.open()">
								<u-input
									:value="formData.construction_arr.names.join('/')"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择施工阶段"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="施工进度" borderBottom @click="showSelect('constructionProgressShow')">
								<u-input
									:value="formData.construction_progress_item.name"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择施工进度"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="施工内容" borderBottom>
								<u--textarea
									disableDefaultPadding
									v-model="formData.content"
									border="none"
									placeholder="请输入施工内容"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="是否超期" borderBottom>
								<u-radio-group v-model="formData.is_overdue" placement="row">
									<u-radio label="已超期" :name="1"></u-radio>
									<u-radio label="未超期" :name="2"></u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="超期原因" borderBottom v-if="formData.is_overdue == 1">
								<u--textarea
									disableDefaultPadding
									v-model="formData.reason_overdue"
									border="none"
									placeholder="请输入超期原因"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="超期类型" borderBottom @click="showSelect('overdueTypeShow')" v-if="formData.is_overdue == 1">
								<u-input
									:value="formData.overdue_type_item.name"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择超期类型"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="超期完工日期" borderBottom @click="showSelect('overdueCompletionDateShow')" v-if="formData.is_overdue == 1">
								<u-input
									:value="formData.overdue_completion_date"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择超期完工日期"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="预计完工日期" borderBottom @click="showSelect('estimatedCompletionDateShow')">
								<u-input
									:value="formData.estimated_completion_date"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择预计完工日期"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="风险标签" borderBottom @click="showSelect('riskLabelShow')" v-if="formData.is_overdue == 1">
								<u-input
									:value="formData.risk_label_item.name"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择风险标签"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="备注" borderBottom>
								<u--textarea
									disableDefaultPadding
									v-model="formData.remark"
									border="none"
									placeholder="请输入备注"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>

							<u-form-item labelPosition="top" labelWidth="100%" label="现场图片/视频">
								<file-upload :type="3" @afterRead="afterRead" @delete="deletePic"></file-upload>
							</u-form-item>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						text="提交"
						@click="submit"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
		</pageTxt>

		<!-- 项目列表 -->
		<u-picker
			:show="projectListShow"
			:columns="projectList"
			keyName="project_name"
			@confirm="confirm($event, 'project_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>
		<!-- 施工阶段 -->
		<bottom-select ref="userSelect" :fetch-data="getConstructionStage" v-model="formData.construction_arr" label-key="name" :multiple="true" value-key="id" />
		<!-- 施工进度 -->
		<u-picker
			:show="constructionProgressShow"
			:columns="constructionProgressList"
			keyName="name"
			@confirm="confirm($event, 'construction_progress_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>
		<!-- 超期类型 -->
		<u-picker
			:show="overdueTypeShow"
			:columns="overdueTypeList"
			keyName="name"
			@confirm="confirm($event, 'overdue_type_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>
		<!-- 超期计划完工日期 -->
		<u-calendar
			:show="overdueCompletionDateShow"
			mode="single"
			@confirm="confirm($event, 'overdue_completion_date')"
			color="#3B75FF"
			closeOnClickOverlay
			@close="close"
		></u-calendar>
		<!-- 预计完工日期 -->
		<u-calendar
			:show="estimatedCompletionDateShow"
			mode="single"
			@confirm="confirm($event, 'estimated_completion_date')"
			color="#3B75FF"
			closeOnClickOverlay
			@close="close"
		></u-calendar>
		<!-- 风险标签 -->
		<u-picker
			:show="riskLabelShow"
			:columns="riskLabelList"
			keyName="name"
			@confirm="confirm($event, 'risk_label_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			formData: {
				project_item: '',
				construction_arr: {
					ids: [],
					names: []
				},
				construction_progress_item: {
					name: '施工中',
					value: 20
				},
				content: '',
				is_overdue: 2,
				reason_overdue: '',
				overdue_type_item: '',
				overdue_completion_date: '',
				estimated_completion_date: '',
				risk_label_item: '',
				remark: '',
				log_file: []
			},
			// 项目
			projectListShow: false,
			projectList: [],
			// 施工阶段
			constructionStageList: [],
			// 施工进度
			constructionProgressShow: false,
			constructionProgressList: [
				[
					{
						name: '待进场',
						value: 10
					},
					{
						name: '施工中',
						value: 20
					},
					{
						name: '一次预警',
						value: 30
					},
					{
						name: '二次预警',
						value: 40
					},
					{
						name: '已超期',
						value: 50
					},
					{
						name: '停工中',
						value: 60
					},
					{
						name: '已完工',
						value: 70
					}
				]
			],
			// 超期类型
			overdueTypeShow: false,
			overdueTypeList: [],
			// 超期计划完工日期
			overdueCompletionDateShow: false,
			// 预计完工日期
			estimatedCompletionDateShow: false,
			// 风险标签
			riskLabelShow: false,
			riskLabelList: [
				[
					{
						name: '一次预警'
					},
					{
						name: '二次预警'
					},
					{
						name: '已超期'
					},
					{
						name: '停工'
					}
				]
			]
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		showSelect(type) {
			this[type] = true;
		},
		close() {
			this.projectListShow = false;
			this.constructionProgressShow = false;
			this.overdueTypeShow = false;
			this.overdueCompletionDateShow = false;
			this.estimatedCompletionDateShow = false;
			this.riskLabelShow = false;
		},
		confirm(e, type) {
			console.log(e, type, 'confirm');
			if (type == 'overdue_completion_date' || type == 'estimated_completion_date') {
				this.formData[type] = e[0];
			} else {
				this.formData[type] = e.value[0];
			}
			this.close();
		},
		afterRead(files) {
			files.map((item) => {
				let obj = {
					url: item.url
				};
				this.formData.log_file.push(obj);
				console.log(this.formData.log_file, 'afterRead');
			});
		},
		deletePic(e) {
			console.log(e, 'deletePic');
			this.formData.log_file.splice(e.index, 1);
		},
		async submit() {
			let formData = this.formData;
			console.log(formData, '提交');
			if (!formData.project_item) {
				this.$refs.uToast.show({
					message: '请选择项目名称'
				});
				return;
			}
			if (formData.construction_arr.ids.length == 0) {
				this.$refs.uToast.show({
					message: '请选择施工阶段'
				});
				return;
			}
			if (!formData.construction_progress_item) {
				this.$refs.uToast.show({
					message: '请选择施工进度'
				});
				return;
			}
			if (!formData.content) {
				this.$refs.uToast.show({
					message: '请选择施工内容'
				});
				return;
			}
			if (formData.is_overdue == 1) {
				if (!formData.overdue_type_item) {
					this.$refs.uToast.show({
						message: '请选择超期类型'
					});
					return;
				}
				if (!formData.overdue_completion_date) {
					this.$refs.uToast.show({
						message: '请选择超期完工日期'
					});
					return;
				}
			}

			let resImg = {
				arrResult: []
			};
			if (formData.log_file.length > 0) {
				resImg = await this.$upload(formData.log_file);
			}
			var res = await this.$hApi.addConstructionLogs({
				project_id: formData.project_item.id,
				content: formData.content,
				construction_progress: formData.construction_progress_item.value,
				is_overdue: formData.is_overdue,
				overdue_type: formData.overdue_type_item ? formData.overdue_type_item.name : '',
				overdue_type_id: formData.overdue_type_item ? formData.overdue_type_item.id : '',
				reason_overdue: formData.reason_overdue,
				construction_stage: formData.construction_arr.names.join(','),
				construction_stage_id: formData.construction_arr.ids.join(','),
				remark: formData.remark,
				node_name: '',
				risk_label: formData.risk_label_item ? formData.risk_label_item.name : '',
				overdue_completion_date: formData.overdue_completion_date,
				estimated_completion_date: formData.estimated_completion_date,
				log_file: resImg.arrResult
			});
			uni.showToast({
				title: res.code == 200 ? '操作成功' : res.message,
				icon: res.code == 200 ? 'success' : 'error'
			});
			if (res.code == 200) {
				var pages = getCurrentPages();
				var perPage = pages[pages.length - 2];
				if (perPage && perPage.$vm.$refs.constructionLog) {
					perPage.$vm.$refs.constructionLog.searchFunc();
				}

				setTimeout(() => {
					if (pages[pages.length - 2]) {
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				}, 500);
			}
		},
		async getConstructionStage(obj) {
			// 施工阶段
			let res = await this.$Apipc.getConstructionStage(obj);
			console.log(res, 'getConstructionStage');
			return res;
		},
		getList() {
			// 项目列表
			this.$Apipc
				.selectProjectList({
					construction_status_arr: [45]
				})
				.then((res) => {
					console.log(res, 'selectProjectList');
					if (res.code == 200) {
						this.projectList = [res.data];
					}
				});
			// 超期类型
			this.$hApi
				.getOverdueType({
					page: 1,
					num: 999
				})
				.then((res) => {
					console.log(res, 'getOverdueType');
					if (res.code == 200) {
						this.overdueTypeList = [res.data.list];
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped></style>
